<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/assets/plug/layui-v2.4.3/layui/css/layui.css">
    <link href="/assets/plug/Hui-iconfont/1.0.9/iconfont.min.css" rel="stylesheet" type="text/css">
    <title>新闻列表</title>
    <style>
        .xinwen{
            width: 100%;
            height: 67px;
            padding: 15px;
            background: #e8edf0;
            border-color: #e8edf0;
        }
        .xinwen h6 {
            font-weight: bold;
            color: #333333;
            font-size: 13px;
            padding: 0;
            margin: 0;
        }
        .xinwen p {
            margin-top: 5px;
        }
        .caozuo {
            width: 100%;
            height: 51px;
            background-color: #fff;
            padding-top:10px;
        }
        .caozuo .addcategory, .caozuo .delcategory, .caozuo .caozuo_search  {
            display: inline-block;
            color: #fff;
            background-color: #18bc9c;
            width: 62px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border-radius: 5px;

        }
        .caozuo .caozuo_search {
            margin-left: 55%;
            background-color: #fff;
            width:  290px;
        }
        .caozuo .caozuo_search input {
            height: 30px;
            padding-left: 7px;
            color: #000;
        }
        .caozuo .caozuo_search span {
            display: inline-block;
            margin-left: 10px;
            width: 60px;
            height: 30px;
            background-color: #18bc9c;
            border-radius: 5px;
        }
        .caozuo .addcategory {
            margin-left: 20px;
        }
        .caozuo .delcategory {
            background-color: #e74c3c;
        }
        table{
            width: 100%;
            background-color: #fff;
        }
        table tr:nth-child(1) {
            height: 35px;
            background-color: #f1f4f6;
            color: #333333;
        }
        table tr:nth-child(1) td{
            border: 1px solid #ddd;
            font-weight: bold;
        }
        table tr td{
            width: 100px;
            height: 35px;
            border: 2px solid rgb(242, 242, 242);
            text-align: center;
            font-size:12px;
        }
        table tr td:nth-child(1){
            width: 50px;
        }
        table tr {
            width: 100%;
            height: 40px;
        }
        table tr img{
            margin-top:5px;
            margin-bottom:5px;
            width: 50px;
            height:35px;
        }
        .pagination > li > a, .pagination > li > span {
            color: #0080d6 !important;
            border: 1px solid #0080d6 !important;
            margin-left: 2px;
        }
        .delproduct {
            color: red;
        }
        .edit_onenews{
            color: #2cb2d2;
        }
    </style>
</head>
<body>
<div class="xinwen">
    <h6>产品分类</h6>
    <p>一个管员可以有多个角色组,左侧的菜单根据管理员所拥有的权限进行生成</p>
</div>
<div class="caozuo">
    <div class="addcategory"><span><i class="Hui-iconfont">&#xe600;</i>添加</span></div>
    <div class="delcategory"><span><i class="Hui-iconfont">&#xe609;</i>删除</span></div>
    <div class="caozuo_search"><input type="text" value="{$Think.session.keywords:search}" name="search"><span id="searchs"><i class="Hui-iconfont">&#xe665;</i>搜索</span></div>
</div>
<div class="category">
    <table>
        <tr>
            <td><input type="checkbox" class="abc" name="SelectAll" ></td>
            <td>新闻ID</td>
            <td>新闻标题</td>
            <td>关键词</td>
            <td>祥细</td>
            <td>发布时间</td>
            <td>图片</td>
            <td>操作</td>
        </tr>
        {foreach name="newsList" item="value"}
        <tr {if condition="$key%2 eq 0"}style="background-color: #f5f5f5"{/if}>
            <td><input type="checkbox" name="selectOne" value="{$value.id}"></td>
            <td>{$value.id}</td>
            <td>{$value.title}</td>
            <td>{$value.keywords|mb_substr=###,0,17,'utf-8'}</td>
            <td>{$value.detail|mb_substr=###,0,17,'utf-8'}</td>
            <td>{$value.create_time}</td>
            <td><img src="{$value.display_img}" alt="产品图片"></td>
            <td><a class="edit_onenews" href="javascript:void(0)"><i class="Hui-iconfont">&#xe6df;编辑</i></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="delproduct" href="/admin/news/delnews?id={$value.id}"><i class="Hui-iconfont">&#xe6e2;删除</i></a></td>
        </tr>
        {/foreach}
    </table>
</div>
<div class="paginate">{$page}</div>
</body>
<script src="/assets/js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="/assets/plug/layui-v2.4.3/layui/layui.js"></script>
<script>
    $(function () {
        //全选和全不选
        $('input[name=SelectAll]').click(function () {
            if($('input[name=SelectAll]').hasClass('abc')){
                $('input[type=checkbox]').prop('checked', true);
                $('input[name=SelectAll]').removeClass('abc');
            }else{
                $('input[type=checkbox]').prop('checked', false);
                $('input[name=SelectAll]').addClass('abc');
            };
        })
        //批量删除
        $('.delcategory').click(function () {
            // 判断是否至少选择一项
            var checkedNum = $("input[name='selectOne']:checked").length;
            if(checkedNum == 0) {
                alert("请选择至少一项！");
                return;
            }
            // 批量选择
            if(confirm("确定要删除所选项目？")) {
                var checkedList = new Array();
                $("input[name='selectOne']:checked").each(function () {
                    checkedList.push($(this).val());
                });
            }
            $.ajax({
                url: '/admin/news/delSelectInputNews',
                type: 'post',
                data: {checkList: JSON.stringify(checkedList)},
                success: function (res) {
                    alert(res.info);
                    if(res.status){
                        top.location.href = '/admin/news/newslist?ref=addtabs';
                    }
                }
            })

        })
        //搜索
        $('#searchs').click(function () {
            var searchKeywords = $('input[name=search]').val();
                $.ajax({
                    url: '/admin/news/searchNewsKeywords',
                    data: {search: searchKeywords},
                    type: 'post',
                    success: function (res) {
                        top.location.href = '/admin/news/newslist?ref=addtabs'
                    }
                })
        })
        //添加分类
        $('.addcategory').click(function () {
            layui.use('layer', function(){
                var layer = layui.layer;
                layer.open({
                    type: 2,
                    anim: 1,
                    title: '新闻管理',
                    area: ['800px', '500px'],
                    btn: [],
                    offset: '10px',
                    btn1: function(index, layero){},
                    content:'/admin/news/addnews'
                });
            });
        })
        //删除商品
        $('.delproduct').click(function (event) {
            var isdel = confirm('确定要删除吗？');
            if(!isdel){
                event.preventDefault();
            }
        })
        //编辑新闻
        $('.edit_onenews').click(function () {
            var id = $(this).parent().siblings(':first').find('input').val()
            layui.use('layer', function(){
                var layer = layui.layer;
                layer.open({
                    type: 2,
                    anim: 1,
                    title: '新闻管理',
                    area: ['800px', '500px'],
                    btn: [],
                    offset: '10px',
                    btn1: function(index, layero){},
                    content:'/admin/news/editnews?id=' + id
                });
            });
        })
    })
</script>
</html>